<template>
  <div class="query-box">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="input-box">
          <div class="input-name">{{$t('Byname42')}}</div>
          <div class="input-content">
            <el-date-picker
              v-model="monthValue"
              style="width:100%"
              size="mini"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM"
              @change="changeData1"
              :picker-options="pickerOptions"
              :placeholder="$t('Byname43')">
            </el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="input-box">
          <div class="input-name">{{ $t('Byname44') }}</div>
          <div class="input-content">
            <el-cascader
              class="EhlCascader"
              style="width:100%"
              clearable
              collapse-tags
              :props="{ multiple: true, checkStrictly: true }"
              :options="citysList"
              :placeholder="$t('Byname44')"
              @change="changeData2">
            </el-cascader>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="input-box">
          <div class="input-name">{{ $t('Byname45') }}</div>
          <div class="input-content">
            <el-cascader
              class="EhlCascader"
              ref="myCascader2"
              style="width:100%"
              clearable
              size="mini"
              collapse-tags
              :props="{ multiple: true, checkStrictly: true }"
              :options="brandList"
              :placeholder="$t('Byname45')"
              @change="changeData3">
            </el-cascader>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="input-box">
          <div class="input-name">{{ $t('Byname46') }}</div>
          <div class="input-content">
            <address-box 
              :placeholder="$t('Byname46')"
              :data="dataObj.carTypeList"
              @change-city="changeData4">
            </address-box>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="input-box">
          <div class="input-name">{{ $t('Byname47') }}</div>
          <div class="input-content">
            <address-box 
              style="width: 420px"
              :placeholder="$t('Byname47')"
              :data="dataObj.shops"
              @change-city="changeData5">
            </address-box>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  </template>
  <script>
  
    import { getBasic } from '@/api/mapApi.js'
    import AddressBox from './vue/AddressBox.vue'
    import AddressBox1 from './vue/AddressBox1.vue'
    export default {
        name: 'queryBox',
        components: {
          AddressBox,
          AddressBox1
        },
        props: {
            year_month: {
                type: String,
                default: () => '',
            },
        },
        data() {
            return {
              value: [],
              pickerOptions: {
                disabledDate: (time) => {
                  // 获取当前日期
                  const current = new Date();
                  const currentYear = current.getFullYear();
                  const currentMonth = current.getMonth() + 1; // 月份从0开始，所以要+1
                  
                  // 获取选择框的日期
                  const selectDate = new Date(time);
                  const selectYear = selectDate.getFullYear();
                  const selectMonth = selectDate.getMonth() + 1;
                  
                  // 禁用当年的未来月份和往年的所有月份
                  if (selectYear > currentYear) {
                    return true; // 禁用未来年份
                  } else if (selectYear === currentYear && selectMonth > currentMonth) {
                    return true; // 禁用当前年的未来月份
                  }
                  
                  return false;
                }
              },
              defaultProps: {
                children: 'children',
                label: 'title',
                value: 'cid'
              },
              queryObj:{},
              dataObj:{},
              brandList: [],
              citysList: [],
              monthList: [],
              monthValue: ''
            }
        },
        created() {
            this.init()
        },

        methods: {
          generateMonthList(){
            // 获取当前年份和月份
            const now = new Date();
            const currentYear = now.getFullYear();
            const currentMonth = now.getMonth() + 1; // 月份从0开始，需要+1
            const monthList = [];
            // 生成当前年份的月份（从1月到当前月份）
            for (let month = 1; month <= currentMonth; month++) {
                // 格式化月份为两位数
                const formattedMonth = month.toString().padStart(2, '0');
                monthList.push({
                  title:`${currentYear}-${formattedMonth}`,
                  id:`${currentYear}-${formattedMonth}`
                });
            }
            return monthList;
          },
          getBasicData(){
            let params = {}
            getBasic(params).then(res=>{
              if(res.status == '200'){
                this.dataObj = res.data
                // 转换为 Cascader 需要的格式
                this.citysList = res.data.citys.map(item => ({
                  value: item.cid,
                  label: item.title,
                  children: item.children ? item.children.map(child => ({
                    value: child.id,
                    label: child.title,
                    // children: child.children || []
                  })) : []
                }))
                // 品牌车型 转换为 Cascader 需要的格式
                this.brandList = res.data.brand.map(item => ({
                  value: item.id,
                  label: item.title,
                  children: item.children ? item.children.map(child => ({
                    value: child.id,
                    label: child.title,
                    // children: child.children || []
                  })) : []
                }))
              }
            })
          },
          init(){
            this.getBasicData()
            // 使用示例
            let timeList = this.generateMonthList()
            this.queryObj.year_month = timeList.pop().id
            this.monthValue = this.queryObj.year_month
            this.$emit('change-query', this.queryObj)
          },
          changeData1(item){
            this.queryObj.year_month = item
            this.$emit('change-query', this.queryObj)
          },
          changeData2(val){
            if(val && val.length){
              // 第一个数组：所有子数组的第一位数字
              const firstNumbers = val.map(item => item[0]);
              // 第二个数组：长度大于1的子数组的第二位数字
              const secondNumbers = val
                .filter(item => item.length > 1)
                .map(item => item[1]);
              this.queryObj.cid = [...new Set(firstNumbers)].join()
              this.queryObj.sid = secondNumbers.join()
            } else {
              this.queryObj.cid = ''
              this.queryObj.sid = ''
            }
            this.$emit('change-query', this.queryObj)
            this.$emit('change-city', val)
          },
          changeData3(val){
            if(val && val.length){
              // 第一个数组：所有子数组的第一位数字
              const firstNumbers = val.map(item => item[0]);
              // 第二个数组：长度大于1的子数组的第二位数字
              const secondNumbers = val
                .filter(item => item.length > 1)
                .map(item => item[1]);
              this.queryObj.car_bid = [...new Set(firstNumbers)].join()
              this.queryObj.car_sid = secondNumbers.join()
            } else {
              this.queryObj.car_bid = ''
              this.queryObj.car_sid = ''
            }
            this.$emit('change-query', this.queryObj)
            this.$emit('change-brand', val)
            
          },
          changeData4(item){
            this.queryObj.cartypeid = item
            this.$emit('change-query', this.queryObj)
          },
          changeData5(item, val){
            this.queryObj.shopid = item
            this.$emit('change-query', this.queryObj)
            this.$emit('change-shop', val)
          }
        }
    }
</script>
<style lang="scss">
//级联框样式
.EhlCascader {
  &.el-cascader {
    height: 30px;
    line-height: 30px;

    .el-input {
      .el-input__inner {
        height: 30px !important;
        padding: 0 8px;
        line-height: 30px;
        color: #000;
        background: #fff0;
        border: 1px solid #fff0;
        font-size: 18px;
        &::placeholder {
          color: #000;
        }

        &:focus {
          border-color: #fff0;
        }
      }

      &.is-focus {
        .el-input__inner {
          border-color: #fff0;
        }
      }

      &.is-disabled {
        .el-input__inner {
          background: #e9e9e9;
          opacity: 0.6;

          &:hover {
            border-color: rgb(34 43 69 / 50%);
          }
        }

        .el-input__suffix {
          .el-input__suffix-inner {
            .el-input__icon {
              cursor: not-allowed;
              opacity: 0.2;
            }
          }
        }
      }
    }

    .el-cascader__tags {
      .el-tag.el-tag--info {
        color: #222b45;
        background-color: #ebeff4;
        max-width: 110px;

        .el-tag__close {
          color: #fff;
        }
      }
    }

    // &:not(.is-disabled):hover {
    //   .el-input__inner {
    //     border: 1px solid #cfd4dc;
    //   }
    // }
  }
}

//级联框弹出框样式
.EhlCascaderPopper {
  &.el-cascader__dropdown {
    background-color: #21406f;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 11px 0 rgb(0 0 0 / 8%);
    .el-cascader-menu {
      color: #fff;

      .el-cascader-menu__wrap {
        height: 250px;
      }
    }

    .el-checkbox__input {
      .el-checkbox__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        background: #fff;
        border: 1px solid #21406f;
        border-radius: 4px;

        &:hover {
          border-color: #21406f;
        }
      }

      &.is-checked {
        .el-checkbox__inner {
          background-color: #21406f;
          border-color: #21406f;

          &::after {
            left: auto;
          }
        }
      }

      &.is-indeterminate {
        .el-checkbox__inner {
          background-color: #fff;
          border-color: #2568ec;

          &::before {
            position: static;
            width: 10px;
            height: 10px;
            background-color: #2568ec;
            border-radius: 2px;
            transform: none;
          }
        }
      }

      &.is-focus {
        .el-checkbox__inner {
          border-color: #2568ec;
        }
      }
    }

    .el-radio__input {
      .el-radio__inner {
        border: 1Px solid #2568ec;
      }

      &.is-checked {
        .el-radio__inner {
          background-color: #fff;
          border-color: #2568ec;

          &::after {
            width: 8px;
            height: 8px;
            background-color: #2568ec;
          }
        }
      }
    }

    .el-scrollbar__bar {
      &.is-vertical {
        width: 4px;
      }

      &.is-horizontal {
        height: 4px;
      }

      .el-scrollbar__thumb {
        background-color: #21406f;

        &:hover {
          background-color: #21406f;
        }
      }
    }
    .el-cascader-node {
      &:hover {
        background-color: rgb(172 202 255 / 20%);
      }
    }
  }
  &.el-popper[x-placement^='bottom'] .popper__arrow::after {
    top: 0;
    border-bottom-color: #21406f;
  }
}
</style>
<style scoped lang="scss">
  .query-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .el-row {
        // width: 100%;
      }
      .el-row .el-col {
        height: 60px;
        display: flex;
        align-items: center;
      }
      .input-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .input-name {
        background-color: #d9001b;
        width: 100%;
        height: 24px;
        text-align: center;
      }
      .input-content {
        width: 100%;
        height: 34px;
        border: 1px solid #d9001b;
        margin-bottom: 5px;
        background-color: #fff;
        display: flex;
        align-items: center;
      }
  }
</style>
  